<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no" name="format-detection">
		<title></title>
		<link href="css/swiper.min.css" rel="stylesheet">
		<link href="css/style.css" rel="stylesheet">
	</head>
	<body>
		<div class="main">
			<div class="icon-info">
				<a class="jz" href="rankinglist.html"><img class="fill" src="img/icon_jz.png"></a>|<a class="aa" href=""><img class="fill" src="img/icon_aa.png"></a>
			</div>
			<div class="container courseslist">
				<div class="human-info">
					<img src="img/icon_avatar.png">
					<b>Wynn | Team lululemon <a href="">点击加入战队</a></b>
				</div>
				<div class="sweatfit">
					<p><b>SWEAT FIT</b>&nbsp;&nbsp;28天挑战&nbsp;&nbsp;<b class="day">Day 1</b></p>
					<div class="dayBar" data="">
						<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
					</div>
				</div>
                <div class="lesson">
                    <div class="text">
                        <b>Lesson 26 | 核心肌群训练 Lv.1</b>
                    </div>
                    <a href="cardrecord.html">打卡记录</a>
                </div>
				<div class="lesson-swiper">
					<div class="swiper-container">
						<div class="swiper-wrapper">
							<div class="swiper-slide" data-nd="2" data-text="Lesson 1 | 核心肌群训练 Lv.3">
                                <img class="fill" src="img/img2.jpg">
                                <div class="pop pop1">
                                    <div class="pop_bg">
                                    <h1>5月17日&nbsp;&nbsp;7am<br>开启新的挑战</h1>
                                    </div>
                                </div>
                            </div>
							<div class="swiper-slide" data-nd="3" data-text="Lesson 2 | 核心肌群训练 Lv.4">
                                <img class="fill" src="img/img2.jpg">
                                <div class="pop pop2">
                                    <div class="pop_bg">
                                    <h1>5月17日&nbsp;&nbsp;7am<br>开启新的挑战</h1>
                                    <p>本日您可以前往<br>lululemon · 新天地店<br>参与线下打卡活动</p>
                                    <a href="">查看详情</a>
                                    </div>
                                </div>
                            </div>
							<div class="swiper-slide" data-nd="5" data-text="Lesson 3 | 核心肌群训练 Lv.5">
                                <img class="fill" src="img/img2.jpg">
                                <div class="pop pop3">
                                    <div class="pop_bg">
                                        <img src="img/icon_a1.png">
                                        <b>great!</b>
                                        <b>恭喜你完成所有课程挑战!</b>
                                        <a href="" class="getb">获取通关证书</a>
                                    </div>
                                </div>
                            </div>
						</div>
					</div>
					<a class="swiper-btn swiper-prev" href=""><img class="fill" src="img/icon_prev.png"></a>
					<a class="swiper-btn swiper-next" href=""><img class="fill" src="img/icon_next.png"></a>
				</div>
				<div class="challenge">
					<b>挑战难度</b>
					<i class="on"></i><i class="on"></i><i></i><i></i><i></i>
				</div>
				<div class="beginCha">
					<a class="btn b">开始挑战</a>
					<a class="btn">开始挑战</a>
				</div>
			</div>
		</div>
	<script src="js/jquery.min.js"></script>
	<script>
		/*
        setdate(5);
        function setdate(e){
            $('.dayBar').attr('data',e);
            for(var i = 0;i< e; i++){
                $('.dayBar i').eq(i).addClass('on');
            }
        }
        var mySwiper = new Swiper('.swiper-container', {
            autoplay: false,
            navigation: {
                nextEl: '.swiper-next',
                prevEl: '.swiper-prev',
            },
            on: {
                slideChangeTransitionStart: function(){
                    var nd = $('.swiper-slide').eq(this.activeIndex).attr('data-nd');
                    var text = $('.swiper-slide').eq(this.activeIndex).attr('data-text');
                    $(".lesson b").text(text);
                    $('.challenge i').removeClass('on');
                    for(var i = 0;i< nd; i++){
                        $('.challenge i').eq(i).addClass('on');
                    }
                },
            }
        })
        */
	</script>
	</body>
</html>